<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="/admin/vendor/bootstrap-table/bootstrap/css/bootstrap.min.css" rel="stylesheet" >
    <link href="/admin/adminframework/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/admin/adminframework/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="/admin/adminframework/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="/admin/vendor/bootstrap-table/bootstrap-table/src/bootstrap-table.css" rel="stylesheet" >
    <link href="/admin/adminframework/css/animate.css" rel="stylesheet">
    <link href="/admin/adminframework/css/style.css?v=4.0.0" rel="stylesheet">
	<link href="/admin/adminframework/css/plugins/datapicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
	<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FRkHcY0HmUgTo4YzIB9EMz0dQtq7X2hA"></script> -->
    <base target="_blank">
	<style type="text/css">
		.date_input{float:left;height:34px;border:1px solid #eeeeee;margin-left:10px;padding:0 15px;}
		.form_date{height:26px;width:75px;border-style:none;text-align:center;}
		.nnnn{margin-left:5px;}
		.glyphicon{width:40px;}
	</style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <div id="atpbiztoolbar">
                        <button class="btn btn-info " type="button" id="sys_add"><i class="fa fa-plus"></i>&nbsp;添加</button>
                        <button class="btn btn-warning " type="button" id="sys_update"><i class="fa fa-pencil"></i>&nbsp;编辑</button>
                        <button class="btn btn-danger " type="button" id="sys_del"><i class="fa fa-eraser"></i>&nbsp;删除</button>
                        <button class="btn btn-danger " type="button" id="sys_disableaccount"><i class="fa  fa-minus-square"></i>&nbsp;禁用</button>
						<br />

                        <form class="form-inline">
							<div style='float:left'>
                                <label>日期:</label>
                            </div>
							<div class="date_input">
								<input id="begin_date" type="text" value="" readonly class="form_date">
								--
								<input id="end_date" type="text" value="" readonly class="form_date">
                            </div>
                            <div class="form-group nnnn">
                                <label >姓名: </label>
                                <input id="search_u_name" type="text"  class="form-control" style="width:100px" >
                            </div>
                            <div class="form-group">
                                <label>绑定电话: </label>
                                <input id="search_u_phone" type="text" class="form-control">
                            </div>
                            <button id="search_button" class="btn btn-info " type="button"><i class="fa fa-search"></i>&nbsp;查询</button>
							<button id="reset_button" class="btn btn-info " type="reset">&nbsp;重置</button>
                        </form>
                    </div>
                    <table id="atpbiztable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="sys_dlg" role="dialog" class="modal fade "></div>



<script src="/admin/vendor/bootstrap-table/jquery.min.js"></script>
<script src="/admin/vendor/bootstrap-table/bootstrap/js/bootstrap.min.js"></script>
<script src="/admin/vendor/My97DatePicker/WdatePicker.js"></script>
<script src="/admin/adminframework/js/plugins/chosen/chosen.jquery.js"></script>
<script src="/admin/adminframework/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
<script src="/admin/adminframework/js/plugins/switchery/switchery.js"></script>
<script src="/admin/vendor/bootstrap-table/bootstrap-table/src/bootstrap-table.js"></script>
<script src="/admin/vendor/bootstrap-table/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script>
<script src="/admin/adminframework/js/plugins/datapicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script src="/admin/adminframework/js/plugins/datapicker/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

<script>
    $(function () {
        $('#atpbiztable').bootstrapTable({
            url: '/admin/Customer/getData',       //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#atpbiztoolbar',           //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            iconSize: 'outline',
            sortable: true,                     //是否启用排序
            sortName:"u_atpid",
            sortOrder: "asc",                    //排序方式
            queryParams: queryParams,            //传递参数（*）
            sidePagination: "server",            //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                        //每页的记录行数（*）
            pageList: [5,10, 25, 50, 100],       //可供选择的每页的行数（*）
            //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "u_atpid",                     //每一行的唯一标识，一般为主键列
            detailView: true,                   //是否显示父子表
            detailFormatter: "detailFormatter",
            columns: [
                [
                    {checkbox: true},
                    {title: '序号',
                        formatter: function (value, row, index)
                        {
                            var option =  $('#atpbiztable').bootstrapTable("getOptions");
                            return option.pageSize * (option.pageNumber - 1) + index + 1;
                        }
                    },
                    {field: 'u_name', title: '姓名',sortable: true},
                    {field: 'addtime', title: '申请时间',sortable: true},
                    {field: 'u_phone', title: '绑定电话', sortable: true},
                    {field: 'u_city', title: '配送省市', sortable: true},
                    {field: 'u_address', title: '详细地址', sortable: true},
					{field: 'u_remark', title: '配送备注', sortable: true},
                    {field: 'u_atpid', title: '操作', sortable: false,
                        formatter: function (value, row, index) {
                            var inp = "'"+  row["u_atpid"] +"'";
                            var a = '<a  class="btn btn-info btn-xs" onclick="updateInRow('+ inp +')">编辑</a>&nbsp;';
                            a += '<a  class="btn btn-danger btn-xs" onclick="delInRow('+ inp +')">删除</a>';
                            return a;
                        }
                    },
                ]
            ],
            onSort: function (name, order) {
//                console.log(name+order);
            },
        });
		
    });

    function queryParams(params) {  //配置参数
        var paramsConf = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,    //页面大小
             offset: params.offset,  //页码
            search: params.search,
            sort: params.sort,      //排序列名
            sortOrder: params.order,//排位命令（desc，asc）
			begin_date: $("#begin_date").val(),
            end_date: $("#end_date").val(),
            u_name: $("#search_u_name").val(),
            u_phone: $("#search_u_phone").val()
        };
        return paramsConf;
    }
	$('.form_date').datetimepicker({
			language:  'zh-CN',
			format: "yyyy-mm-dd",
			weekStart: 1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0,
		});

    function submitdata()
    {
        $("#sys_dlg_form").submit(function(e)
        {
            var formObj = $(this);
//            var formURL = formObj.attr("action");
            var formData = new FormData(this);
            console.log(formData);
            $.ajax({
                url: '/admin/Customer/submit',
                type: 'POST',
                data:  formData,
                mimeType:"multipart/form-data",
                contentType: false,
                cache: false,
                processData:false,
                success: function(data, textStatus, jqXHR)
                {
                    $('#atpbiztable').bootstrapTable('refresh')
                },
                error: function(jqXHR, textStatus, errorThrown)
                {
                    $('#atpbiztable').bootstrapTable('refresh')
                }
            });
            e.preventDefault();
        });
        $("#sys_dlg_form").submit();
    }

    $('#sys_add').on('click',function(){
        $("#sys_dlg").load('/admin/Customer/add', function() {
            $('#sys_dlg_submit').on('click', submitdata);
            $("#sys_dlg").modal({backdrop: false});
        });
    });

    $('#sys_update').on('click',function() {
        var tablerow = $('#atpbiztable').bootstrapTable('getSelections');
        if(tablerow.length !== 1)
        {
            alert("您已多选或者少选，仅能对一条数据进行操作");
            return;
        }
        $("#sys_dlg").load('/admin/Customer/edit?id=' + tablerow[0]['u_atpid'], function() {
            $('#sys_dlg_submit').on('click',submitdata);
            $("#sys_dlg").modal({backdrop: false});
        });
    });

    $('#sys_del').on('click',function() {
        var tablerow = $('#atpbiztable').bootstrapTable('getSelections');
        if (tablerow.length === 0) {
            alert("您尚未选择数据");
            return
        }

        if (confirm('确认删除' + tablerow.length + '条数据?')) {
            var ids = [];
            $.each(tablerow, function () {
                ids.push(this['u_atpid']);
            });
            $.post('/admin/Customer/del', {ids: ids.join(',')}, function (rep, status) {
                if ('' == rep) {
                    $('#atpbiztable').bootstrapTable('refresh')
                }
                else {
                    alert('删除失败' + "可能是因为数据存在关联无法删除<br>错误详情：" + rep);
                }
            });
        }
    });

    $('#search_button').on('click', function () {
        $('#atpbiztable').bootstrapTable('refresh')
    });

    function updateInRow(id)
    {
        $("#sys_dlg").load('/admin/Customer/edit?id=' + id, function() {
            $('#sys_dlg_submit').on('click',submitdata);
            $("#sys_dlg").modal({backdrop: false});
        });
    }

    function delInRow(id)
    {
        if (confirm('确认删除数据?')) {
            var ids = [];
            ids.push(id);
            $.post('/admin/Customer/del', {ids: ids.join(',')}, function (rep, status) {
                if ('' == rep) {
                    $('#atpbiztable').bootstrapTable('refresh')
                }
                else {
                    alert('删除失败' + "可能是因为数据存在关联无法删除<br>错误详情：" + rep);
                }
            });
        }
    }

</script>
</body>

</html>